<script type="text/javascript" src="../../repo/files/%3Apublic%3Aplugin-samples%3Apentaho-cdf%3Alegacy%3A30-documentation%3A30-component_reference%3AMetaLayerSamples.js"></script>

<div class="shadow">

	<div class="contents">

		<h2>DateInputComponent</h2>

		<h3>Description</h3>
		<p>
		Renders a date input box to collect user input from. 

		This component fires a event change where we select older months using the mouse. That
		can be prevented using arrow keys. The component is fully localized according to the selected user locale.
		</p>

		<h3>Options</h3>

		<dl class="documentation">
			<dt>name</dt>
			<dd>The name of the component</dd>

			<dt>type</dt>
			<dd><code>dateInputComponent</code></dd>

			<dt>listeners</dt>
			<dd><i>Array - </i> Parameters who this component will react to</dd>

			<dt>parameter</dt>
			<dd>Variable where the input is stored</dd>

			<dt>htmlObject</dt>
			<dd>Id of the component (usually a div or a span tag) to be replaced by the result</dd>

			<dt>refreshPeriod</dt>
			<dd>Time in seconds for this component to refresh. Default is 0 (disabled)</dd>

			<dt>dateFormat</dt>
			<dd><i>String - </i>Format used for date output and parsing (including <i>startDate</i> and <i>endDate</i> fields). Must be a jquery datePicker format string:
				<ul>
					<li> d  - day of month (no leading zero)</li>
					<li> dd - day of month (two digit)</li>
					<li> D  - day name short</li>
					<li> DD - day name long</li>
					<li> m  - month of year (no leading zero)</li>
					<li> mm - month of year (two digit)</li>
					<li> M  - month name short</li>
					<li> MM - month name long</li>
					<li> y  - year (two digit)</li>
					<li> yy - year (four digit)</li>
					<li> @  - Unix timestamp (also known as epoch seconds or POSIX time) in milliseconds since 01/01/1970</li>
					<li> '...' - literal text</li>
					<li> '' - single quote</li>
					<li> anything else - literal text</li>
				</ul>Default is 'yy-mm-dd'.</dd>

			<dt>startDate</dt>
			<dd><i>String - </i>Component will only allow selection of dates after this value. Value is a string containing a date compliant to this component's <i>dateFormat</i>. Special value 'TODAY' will translate to current date whenever the component is updated. Empty by default (no restriction)</dd>

			<dt>endDate</dt>
			<dd><i>String - </i>Component will only allow selection of dates before this value. Value is a string containing a date compliant to this component's <i>dateFormat</i>. Special value 'TODAY' will translate to current date whenever the component is updated. Empty by default (no restriction)</dd>

			<dt>onOpenEvent</dt>
			<dd><i>Function - </i> Function to be called when the 'onOpen' event is triggered</dd>

			<dt>onCloseEvent</dt>
			<dd><i>Function - </i> Function to be called when the 'onClose' event is triggered</dd> 

			<dt>executeAtStart</dt>
			<dd>True to execute the component at start, false otherwise</dd>

			<dt>tooltip</dt>
			<dd>Tooltip to be displayed when mouse hovers</dd>

			<dt>preExecution</dt>
			<dd><i>Function - </i> Function to be called before the component is executed</dd>

			<dt>postExecution</dt>
			<dd><i>Function - </i> Function to be called after the component is executed</dd>

			<dt>preChange</dt>
			<dd><i>Function - </i> Function to be called before the component is changed</dd>

			<dt>postChange</dt>
			<dd><i>Function - </i> Function to be called after the component is changed</dd>


		</dl>

		<h3>Sample</h3>

		<div id="example" class="flora">
			<ul>

				<li><a href="#sample"><span>Sample</span></a></li>
				<li><a href="#code"><span>Code</span></a></li>
			</ul>
			<div id="sample">

				<div style="font-size: 9pt" id="sampleObject"></div>

			</div>


				<div id="code">
					<textarea cols="80" rows="20" id="samplecode">
myInput = {
	name: "myInput",
	type: "dateInputComponent",
	parameters:[],
	parameter: "input",
	htmlObject: "sampleObject",
	dateFormat: "yy-mm-dd",
	startDate: "2006-05-31",
	endDate: "TODAY",
	executeAtStart: true,
	onOpenEvent: function() {
		this.placeholder("input").css('border', '2px solid red'); 
	},
	onCloseEvent: function() {
		this.placeholder("input").css('border', '1px solid black'); 
	},
	tooltip: "Click me to select a date",
	postChange: function(){alert("You chose: " + input);}
};

Dashboards.init([myInput]);
Dashboards.finishedInit = false;

					</textarea>
					<br />
					<button onclick="evaluateCode(true)">Try me</button>
				</div>
			</div>

		</div>
	</div>

	<script language="javascript" type="text/javascript">
		var input = "2009-01-01";
		var myInput;
		var tabs = $("#example").tabs();
		evaluateCode(false);
	</script>
